<template>
	<view class="container">
		<view class="background">
			<view class="top">
				<!-- 头像、昵称展示 -->
				<view class="userDisplay">
					<view class="avatar" @click="this.avatarChangeShow=true">
					  <u--image 
						:src="urlConstruct(userInfo.avatar)" 
						width="120rpx" 
						height="120rpx" 
						shape="circle"
						:lazy-load="true"
						:fade="false" 
					  >
						<!-- 加载中状态显示转圈圈 -->
						<view slot="loading" class="loading-spinner"></view>
						
						<!-- 错误状态保持不变 -->
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					  </u--image>
					</view>
					<view class="nameView">
						<view>
							<view style="font-weight: bold;font-size: 36rpx;color: #000000;">{{userInfo.nickName}}
							</view>
							<view style="font-size: 30rpx;display: flex;margin-top: 10rpx;color: #6f6d71;">
								<!-- <text class="iconfont" style="margin-right: 7rpx;color: #ffffff;">&#xe654;</text> -->
								<text class="selfIntroductionText">简介：{{userInfo.profile}}</text>
							</view>
						</view>
					</view>
				</view>
				<view style="display: flex;justify-content: center;align-items: center;">
					<view class="buttonView">
						<view class="buttonItem" @click="handleOrderClick(0)">
							<text class="iconfont" style="margin-bottom: 12rpx;font-size: 45rpx;">&#xe615;</text>
							<text class="order-label">待付款</text>
						</view>
						<!-- 一条竖线 -->
						<!-- <view style="border-right: #2b92ff solid 1px;height: 40rpx;"> -->
						<!-- </view> -->
						<view class="buttonItem" @click="handleOrderClick(1)">
							<text class="iconfont" style="margin-bottom:12rpx;font-size: 42rpx;">&#xe610;</text>
							<text class="order-label">待使用</text>
						</view>
						<!-- 一条竖线 -->
						<!-- <view style="border-right: #2b92ff solid 1px;height: 40rpx;"> -->
						<!-- </view> -->
						<view class="buttonItem" @click="handleOrderClick(4)">
							<text class="iconfont" style="margin-bottom: 12rpx;font-size: 42rpx;">&#xe63f;</text>
							<text class="order-label">已完成</text>
						</view>
						<!-- 一条竖线 -->
						<!-- <view style="border-right: #2b92ff solid 1px;height: 40rpx;"> -->
						<!-- </view> -->
						<view class="buttonItem" @click="handleOrderClick(2)">
							<text class="iconfont" style="margin-bottom: 12rpx;font-size: 45rpx;">&#xe727;</text>
							<text class="order-label">已取消</text>
						</view>
						<!-- <view style="border-right: #2b92ff solid 1px;height: 40rpx;"> -->
						<!-- </view> -->
						<view class="buttonItem" @click="handleOrderClick(3)">
							<text class="iconfont" style="margin-bottom: 12rpx;font-size: 45rpx;">&#xe727;</text>
							<text class="order-label">已退款</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<!-- 新增最近订单模块 -->
			<view class="recent-order" v-if="nearestOrder">
				<view class="order-card">
					<!-- 					<view class="order-header">
						<text class="order-id">#{{nearestOrder.orderSn.slice(0,12)}}</text>
						<text class="order-status">待核销</text>
					</view> -->

					<view class="order-content">
						<view class="venue-info">
							<view class="venue-icon">场</view>
							<view class="name-info">
								<text class="venue-name">{{nearestOrder.venueName}}</text>
								<text class="partition-name">{{nearestOrder.partitionName}}</text>
								<text class="partition-name">{{nearestOrder.courtIndex}}号场</text>
							</view>
							<text class="price">¥{{nearestOrder.payAmount}}</text>
						</view>

						<view class="time-info" @click="viewDetail(nearestOrder.orderSn)">
							<view class="time-block">
								<text class="time-label">日期</text><br>
								<text class="time-value">{{formatDate(nearestOrder.periodDate)}}</text>
							</view>
							<view class="time-block">
								<text class="time-label">开始</text><br>
								<text class="time-value">{{nearestOrder.beginTime.slice(0,5)}}</text>
							</view>
							<view class="time-block">
								<text class="time-label">结束</text><br>
								<text class="time-value">{{nearestOrder.endTime.slice(0,5)}}</text>
							</view>
							<view class="time-block">
								<text class="time-label">时长</text><br>
								<text
									class="time-value">{{ formatDuration(nearestOrder.beginTime, nearestOrder.endTime) }}</text>
							</view>
						</view>
						<button class="action-btn" @click="handleVerification">核销订单</button>
					</view>
				</view>
			</view>
		</view>
		<view class="userMessage">
			<u-cell-group class="custom-cell-group">
				<u-cell class="custom-cell" name="fixmessage" :isLink="true" @click="goToFixedMessagePage">
					<view slot="title" class="u-slot-title">
						<text class="iconfont cell-icon" style="font-size: 35rpx;">&#xe6ff;</text>
						<text class="u-cell-text">修改个人资料</text>
					</view>
				</u-cell>
				<u-cell class="custom-cell" name="myfavorite" :isLink="true">
					<view slot="title" class="u-slot-title">
						<text class="iconfont cell-icon" style="font-size: 43rpx;">&#xeb26;</text>
						<text class="u-cell-text">我的收藏</text>
					</view>
				</u-cell>
				<u-cell class="custom-cell" name="historylook" :isLink="true">
					<view slot="title" class="u-slot-title">
						<text class="iconfont cell-icon" style="font-size: 38rpx;">&#xe674;</text>
						<text class="u-cell-text">历史浏览</text>
					</view>
				</u-cell>
				<u-cell class="custom-cell" name="aboutus" :isLink="true">
					<view slot="title" class="u-slot-title">
						<text class="iconfont cell-icon" style="font-size: 37rpx;">&#xe645;</text>
						<text class="u-cell-text">关于我们</text>
					</view>
				</u-cell>
				<u-cell class="custom-cell" name="aboutus" :isLink="true">
					<view slot="title" class="u-slot-title" @click="logout()">
						<text class="iconfont cell-icon" style="font-size: 37rpx;">&#xe659;</text>
						<text class="u-cell-text">退出账号</text>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<!-- 添加在template底部 -->
		<u-modal :show="showQRCode" title="核销二维码" @confirm="showQRCode = false" @cancel="showQRCode = false">
			<view style="padding: 20rpx;">
				<view style="display: flex;justify-content: center;">
					<u--image :src="orCode" width="300rpx" height="300rpx" mode="aspectFit"></u--image>
				</view>
				<view style="text-align: center; padding: 20rpx; color: #666;">
					请向工作人员展示此二维码
				</view>
			</view>

		</u-modal>
	</view>
</template>
<script>
	import {
		logout
	} from "@/api/login";
	import {
		getUserProfileVo
	} from "@/api/user";
	import {
		picUrlConstruct
	} from "@/utils/picUrlConstruct.js";
	import {
		getNearestOrder
	} from "@/api/book/getNearestOrder.js"
	import {
		generateORCode
	} from "@/api/book/order.js"
	export default {

		data() {
			return {
				userInfo: {
					avatar: '',
					nickName: "你好呀",
					userName: "admin",
					schoolName: "XX大学",
					campusName: "XX学院",
					sex: 0,
					selfIntroduction: "自我介绍,打撒活动啊速宏达搜好滴傻大搜到阿斯顿撒旦好骚",
					contactInformation: "联系方式",
					email: "32136712361@qq.com"
				},
				sexName: '其他',
				nearestOrder: null, // 新增最近订单数据
				// 原有数据...
				showQRCode: false, // 控制二维码弹窗显示
				orCode: '' // 存储二维码图片数据
			}
		},
		created() {
			// this.getUserProfile();

		},
		onShow: function() {
			console.log("查询个人信息")
			this.getUserProfile();
			this.fetchNearestOrder() // 每次进入页面获取最新订单
		},

		methods: {
			// 新增方法：获取最近订单
			async fetchNearestOrder() {
				try {
					const res = await getNearestOrder();
					if (res.code === "200") {
						this.nearestOrder = res.data
					}
				} catch (error) {
					console.error('获取最近订单失败:', error)
				}
			},
			handleVerification() {
				uni.showModal({
					title: '确认核销',
					content: '确定要核销此订单吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								// 获取二维码
								await this.generateORCode();
								// 显示二维码弹窗
								this.showQRCode = true;
							} catch (error) {
								uni.showToast({
									title: '获取二维码失败',
									icon: 'none'
								});
							}
						}
					}
				})
			},
			// 新增方法：获取订单二维码
			async generateORCode() {
				try {
					const res = await generateORCode(this.nearestOrder.orderSn);
					if (res.code === "200") {
						this.orCode = res.data
					}
				} catch (error) {
					console.error('获取订单二维码失败:', error)
				}

			},
			// 登出账号
			logout() {
				console.log("退出账号：")
				logout().then(res => {
					console.log("退出账号：" + JSON.stringify(res));
					// 清除所有缓存
					uni.clearStorageSync();
					// 跳转到登录页
					uni.redirectTo({
						url: "/pages/login/login"
					})
				})
			},
			viewDetail(orderSn) {
				uni.navigateTo({
					url: `/pages/book/order?orderSn=${orderSn}`
				});
			},
			// 从文档1复制的方法
			formatDate(dateStr) {
				if (!dateStr) return ''
				const date = new Date(dateStr)
				const month = (date.getMonth() + 1).toString().padStart(2, '0')
				const day = date.getDate().toString().padStart(2, '0')
				return `${month}-${day}`
			},
			formatDuration(startTime, endTime) {
				// 将时间字符串转换为分钟数
				const parseTime = (timeStr) => {
					const [hours, minutes] = timeStr.split(':').map(Number)
					return hours * 60 + minutes
				}

				// 计算分钟差[7](@ref)
				const startMinutes = parseTime(startTime)
				const endMinutes = parseTime(endTime)
				let diffMinutes = endMinutes - startMinutes

				// 转换为小时并保留1位小数[6](@ref)
				const hours = (diffMinutes / 60).toFixed(2)
				return `${hours}h`
			},
			urlConstruct(url) {
				return picUrlConstruct(url);
			},

			goToFixedMessagePage() {
				uni.navigateTo({
					url: '/pages/my/FixedMessage/FixedMessage'
				});
			},
			// editMessage(editKey, currentValue, editName, valueId = undefined, schoolId = undefined) {
			// 	uni.navigateTo({
			// 		url: "/pages/my/profileEdit?editKey=" + editKey + "&currentValue=" + currentValue +
			// 			"&editName=" + editName + "&valueId=" + valueId + "&schoolId=" + schoolId
			// 	})
			// },
			/**
			 * 登出账号
			 */
			logout() {
				// 清除所有缓存
				uni.clearStorageSync();
				// 跳转到登录页
				uni.redirectTo({
					url: "/pages/login/login"
				})
			},
			/**
			 * 获取用户信息
			 */
			getUserProfile() {
				getUserProfileVo().then(res => {
					// console.log("getUserProfile：" + JSON.stringify(res));
					this.userInfo = res.data;
					this.sexName = this.getSexName(this.userInfo.sex);
					console.log("头像：" + this.userInfo.avatar);
					// console.log("this.userInfo.sex:" + this.userInfo.sex + ",this.sexName:" + this.sexName);
					// console.log("this.userInfo：" + JSON.stringify(this.userInfo));
				})
			},
			getSexName(type) {
				if (type == 0) {
					return "男";
				} else if (type == 1) {
					return "女";
				} else if (type == 2) {
					return "其他";
				}
			},
			handleOrderClick(status) {
				uni.navigateTo({
					url: `/pages/my/listMyOrder?orderStatus=${status}`
				});
			}
		}
	}
</script>

<style lang="scss">
	
	/* 加载动画样式 */
	.loading-spinner {
	  width: 100%;
	  height: 100%;
	  border: 4rpx solid rgba(0, 0, 0, 0.1);
	  border-top-color: #2979ff;  
	  border-radius: 50%;
	  animation: spin 1s linear infinite;
	  box-sizing: border-box;
	}
	
	@keyframes spin {
	  to { transform: rotate(360deg); }
	}
	
	/* 保持原有avatar样式 */
	.avatar {
	  position: relative;
	  width: 120rpx;
	  height: 120rpx;
	  border-radius: 50%;
	  overflow: hidden;
	}
	
	.container {
		display: flex;
		flex-direction: column;
		font-family: sans-serif;
		background-color: #f0f5ff;
		min-height: 100vh;

		.background {
			background-image: url("@/static/uniappMineBackground.png");
			background-repeat: no-repeat;
			background-size: 100%;
			width: 100%;
			// height: 150px;
			padding-top: 20px;
			margin-bottom: 25rpx;

			.top {
				background: rgba(255, 255, 255, 0.5);
				border-radius: 15px;
				box-shadow: 5rpx 10rpx 20rpx rgba(0, 0, 0, 0.2);
				margin: 0px 20rpx;
				height: 350rpx;

				.userDisplay {
					display: flex;
					padding: 25rpx;

					.avatar {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 20rpx;
						background: #ffffff;
						border-radius: 50%;
						padding: 3px;
					}

					.nameView {
						display: flex;
						justify-content: center;
						align-items: center;

						.selfIntroductionText {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							/* 显示1行 */
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
					}
				}

				.buttonView {
					display: flex;
					height: 180rpx;
					width: 90%;
					align-items: center;
					padding: 0 20rpx;

					.buttonItem {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						padding: 10rpx 0;
						margin-top: 36rpx;
						// font-size: 26rpx;
					}

					.order-label {
						font-size: 24rpx;
						color: #666;
						line-height: 1.4;
					}
				}
			}

		}

		/* 新增最近订单样式 */
		.recent-order {
			padding: 0rpx 20rpx;
			background-color: #f0f5ff;
		}

		.order-card {
			background: white;
			border-radius: 12px;
			box-shadow: 0 4px 15px rgba(0, 119, 204, 0.1);
			overflow: hidden;
			// margin-bottom: 20px;
		}

		.order-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 14px 18px;
			background-color: #f5faff;
			border-bottom: 1px solid #e1ecf7;
		}

		.order-id {
			font-size: 13px;
			color: #5a7a9a;
			font-weight: 500;
		}

		.order-status {
			font-size: 12px;
			background-color: #0077cc;
			color: white;
			padding: 4px 10px;
			border-radius: 10px;
			font-weight: 500;
		}

		.order-content {
			padding: 16px 18px;
		}

		.venue-info {
			display: flex;
			align-items: center;
			margin-bottom: 14px;
		}

		.venue-icon {
			width: 28px;
			height: 28px;
			background-color: #e6f2ff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 12px;
			color: #0077cc;
			font-size: 14px;
			font-weight: bold;
		}

		.name-info {
			display: flex;
			gap: 2px;
			justify-content: space-between;
			align-items: center;
		}

		.venue-name {
			font-weight: 600;
			font-size: 16px;
			color: #2c3e50;
		}

		.partition-name {
			font-size: 13px;
			color: #5a7a9a;
			margin-left: 6px;

		}

		.price {
			font-size: 17px;
			font-weight: 600;
			color: #0077cc;
			margin-left: auto;
		}


		.time-info {
			display: flex;
			justify-content: space-between;
			margin-bottom: 16px;
			background-color: #f5faff;
			padding: 12px;
			border-radius: 8px;
		}

		.time-block {
			text-align: center;
			flex: 1;
		}

		.time-label {
			font-size: 11px;
			color: #7a9cbc;
			margin-bottom: 6px;
		}

		.time-value {
			font-size: 14px;
			font-weight: 600;
			color: #2c3e50;
		}

		.user-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 14px;
			border-top: 1px dashed #e1ecf7;
		}

		.user-name {
			font-size: 13px;
			color: #5a7a9a;
		}

		.action-btn {
			width: 100%;
			padding: 4px;
			margin-top: 16px;
			background: linear-gradient(135deg, #0077cc, #00a0e9);
			color: white;
			border: none;
			border-radius: 8px;
			font-size: 15px;
			font-weight: 600;
			transition: all 0.2s;
			box-shadow: 0 2px 8px rgba(0, 119, 204, 0.2);
		}

		.userMessage {
			margin: 20rpx;
			background-color: #f0f5ff;

			.custom-cell-group {
				background-color: #f0f5ff;

				.custom-cell {
					margin-bottom: 15rpx;
					background: #ffffff;
					border-radius: 12px;
					box-shadow: 0 4px 15px rgba(0, 119, 204, 0.1);
					overflow: hidden;

					.u-slot-title {
						display: flex;
						align-items: center;
						padding: 20rpx 0;

						.cell-icon {
							font-size: 38rpx;
							color: #0077cc;
							margin-right: 15rpx;
							width: 50rpx;
							text-align: center;
						}

						.u-cell-text {
							font-size: 32rpx;
							color: #2c3e50;
							font-weight: 500;
						}
					}

					&::after {
						border-bottom: none !important;
					}
				}
			}
		}
	}
</style>